<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="openFilter()" [ariaLabel]="'core.filter' | translate">
                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true" />
            </ion-button>
            <core-context-menu>
                <core-context-menu-item *ngIf="!selectedDayIsCurrent()" [priority]="900" [content]="'addon.calendar.today' | translate"
                    iconAction="fas-calendar-day" (action)="goToCurrentDay()" />
                <core-context-menu-item [hidden]="!loaded || !selectedDayHasOffline() || !isOnline" [priority]="400"
                    [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event)" [iconAction]="syncIcon"
                    [closeOnClick]="false" />
            </core-context-menu>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>

    <core-loading [hideUntil]="loaded">
        <div class="core-swipe-slides-container">
            <!-- Period name and arrows to navigate. -->
            <ion-grid class="ion-no-padding safe-area-padding">
                <ion-row class="ion-align-items-center">
                    <ion-col class="ion-text-start">
                        <ion-button fill="clear" (click)="loadPrevious()" [ariaLabel]="'addon.calendar.dayprev' | translate">
                            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    </ion-col>
                    <ion-col class="ion-text-center addon-calendar-period">
                        <h2>{{ periodName }}</h2>
                    </ion-col>
                    <ion-col class="ion-text-end">
                        <ion-button fill="clear" (click)="loadNext()" [ariaLabel]="'addon.calendar.daynext' | translate">
                            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-grid>

            <core-swipe-slides [manager]="manager">
                <ng-template let-day="item">
                    <core-loading [hideUntil]="day.loaded">
                        <!-- There is data to be synchronized -->
                        <ion-card class="core-warning-card list-item-limited-width" *ngIf="day.hasOffline">
                            <ion-item>
                                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                                <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
                            </ion-item>
                        </ion-card>

                        <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar"
                            [message]="'addon.calendar.noevents' | translate" />

                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="list-item-limited-width">
                            <ng-container *ngFor="let event of day.filteredEvents">
                                <ion-card>
                                    <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
                                        (click)="gotoEvent(event.id, day)" [class.item-dimmed]="event.ispast"
                                        [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button [detail]="false">
                                        <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
                                            [modname]="event.modulename" [componentId]="event.instance" [purpose]="event.purpose"
                                            [isBranded]="event.branded" />
                                        <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
                                            aria-hidden="true" />
                                        <ion-label>
                                            <!-- Add the icon title so accessibility tools read it. -->
                                            <span class="sr-only">
                                                {{ 'addon.calendar.type' + event.formattedType | translate }}
                                                <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle
                                                    }}</span>
                                            </span>
                                            <p class="item-heading">
                                                <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
                                                    [contextInstanceId]="event.contextInstanceId" [sanitize]="event.offline" />
                                            </p>
                                            <p>
                                                <core-format-text [text]="event.formattedtime" [filter]="false" />
                                            </p>
                                        </ion-label>
                                        <ion-note *ngIf="event.offline && !event.deleted" slot="end">
                                            <ion-icon name="fas-clock" aria-hidden="true" />
                                            <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
                                        </ion-note>
                                        <ion-note *ngIf="event.deleted" slot="end">
                                            <ion-icon name="fas-trash" aria-hidden="true" />
                                            <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
                                        </ion-note>
                                    </ion-item>
                                </ion-card>
                            </ng-container>
                        </ion-list>
                    </core-loading>
                </ng-template>
            </core-swipe-slides>
        </div>
    </core-loading>

    <!-- Create a calendar event. -->
    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canCreate && loaded">
        <ion-fab-button (click)="openEdit()" [attr.aria-label]="'addon.calendar.newevent' | translate">
            <ion-icon name="fas-plus" aria-hidden="true" />
            <span class="sr-only">{{ 'addon.calendar.newevent' | translate }}</span>
        </ion-fab-button>
    </ion-fab>
</ion-content>
